<script setup>
import { ref } from 'vue'
import { randomListService } from '@/api/music.js'
import { getCoverService } from '@/api/download.js'
import { Music } from '@icon-park/vue-next'
import { useRouter } from 'vue-router'

const router = useRouter()
const cardData = ref([])
const randomList = async () => {
  const resp = await randomListService(9)
  if (resp.code === 1) {
    cardData.value = resp.data
  }
}
randomList()

const clickD = async (id) => {
  await router.push('/details?id=' + id)
}
</script>

<template>
  <div class="index2">
    <h1>——&nbsp;新歌发布&nbsp;——</h1>
    <div class="container">
      <van-row justify="space-around">
        <!-- 循环渲染数组中的元素 -->
        <van-col v-for="item in cardData" :key="item.id" :span="7" @click="clickD(item.id)">
          <el-container>
            <el-aside width="100px">
              <van-image
                class="img-radius"
                width="100px"
                height="100px"
                :src="getCoverService(item.id)"
              >
                <template v-slot:error>
                  <music theme="outline" size="20" fill="#333" :strokeWidth="3" />
                </template>
              </van-image>
            </el-aside>
            <el-main>
              <van-text-ellipsis :content="item.name" />
              <van-text-ellipsis class="artist" :content="item.artist" />
              <van-text-ellipsis class="artist" :content="item.album" />
            </el-main>
          </el-container>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<style scoped>
.index2 {
  text-align: center;
  padding: 25px 20px;

  .container {
    margin: 0 auto;

    .van-row {

      .van-col {
        background-color: #FFFFFF;
        margin: 5px 0;
        border-radius: 8px;
        cursor: pointer;

        .el-main {
          padding: 0 18px 0 15px;
          text-align: left;

          .artist {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
